<template>
    <el-button @click="exportToPDF">导出为PDF</el-button>
    <div class="outerBox">
        <div class="sidebar">
            <el-aside>
                <el-menu :default-active="activeMenu" @select="handleMenuSelect" class="sidebar-menu">
                    <el-menu-item index="basic-info">一、课程基本信息</el-menu-item>
                    <el-menu-item index="objectives">二、该课程各个课程目标及权重值的确定</el-menu-item>
                    <el-menu-item index="quantitative-analysis">三、课程目标达成度定量分析</el-menu-item>
                    <el-menu-item index="summary-improvement">四、总结及改进措施</el-menu-item>
                    <el-menu-item index="evaluation-confirmation">五、课程目标达成度评价合理性确认</el-menu-item>
                </el-menu>
            </el-aside>
        </div>

        <div  class="content-to-export" direction="vertical">
            <el-header class="headerTest">
                <h1>《数据结构》课程目标达成度评价</h1>
            </el-header>
            <el-card id="basic-info" class="box-card">
                <div class="card-header">
                    <span>一、课程基本信息</span>
                </div>
                <div class="table-container">
                    <!-- 左侧表格 -->
                    <el-table :data="courseBasicInfo.slice(0, 4)" style="width: 50%; float: left;" border>
                        <el-table-column width="180" prop="item">
                        </el-table-column>
                        <el-table-column prop="content">
                        </el-table-column>
                    </el-table>

                    <!-- 右侧表格 -->
                    <el-table :data="courseBasicInfo.slice(4, 10)" style="width: 50%; float: left;" border>
                        <el-table-column width="180" prop="item">
                        </el-table-column>
                        <el-table-column prop="content">
                        </el-table-column>
                    </el-table>
                </div>
            </el-card>
            <el-card id="objectives" class="box-card">
                <div class="card-header">
                    <span>二、该课程各个课程目标及权重值的确定</span>
                </div>
                <div class="statementBox">
                    <div>
                        根据软件工程专业认证标准要求，该课程的课程目标如下：
                    </div>
                    <ol>
                        <li>
                            课程目标1：知识教学目标 — 认识计算机应用中数据对象的特性，数据结构及其分类；具有各种数据的逻辑结构、存储结构、相应算法及其之间关系的相关知识。
                        </li>
                        <li>
                            课程目标2：基础能力培养目标 — 能应用数据结构的基础理论知识，具备各种数据结构及其算法的理论知识与设计技能，能设计各种基本数据结构和实现方法，并用于编制高效可靠的程序。
                        </li>
                        <li>
                            课程目标3：综合应用能力培养 — 能针对实际应用问题进行分析，合理地选择相应的数据结构，并进行算法设计与实现。
                        </li>
                    </ol>
                </div>
                <el-table :data="evaluationMatrix" border style="width: 100%">
                    <el-table-column width="120px">
                        <template #header>
                            <div class="diagonal-split-header">
                                <div class="text-part" style="bottom: 37px; right: 0;">毕业要求</div>
                                <div class="text-part" style="top: 37px; left: 0;">课程目标</div>
                                <div class="diagonal-line"></div>
                            </div>
                        </template>
                        <template #default="scope">
                            {{ scope.row.criteria }}
                        </template>
                    </el-table-column>
                    <el-table-column label="工程知识">
                        <el-table-column prop="ek1" label="1-1" width="70px"></el-table-column>
                        <el-table-column prop="ek2" label="1-2" width="70px"></el-table-column>
                        <el-table-column prop="ek3" label="1-3" width="70px"></el-table-column>
                        <el-table-column prop="ek4" label="1-4" width="70px"></el-table-column>
                    </el-table-column>
                    <el-table-column label="问题分析">
                        <el-table-column prop="pa1" label="2-1" width="70px"></el-table-column>
                        <el-table-column prop="pa2" label="2-2" width="70px"></el-table-column>
                        <el-table-column prop="pa3" label="2-3" width="70px"></el-table-column>
                    </el-table-column>
                    <el-table-column label="设计/开发解决方案">
                        <el-table-column prop="ds1" label="3-1" width="90px"></el-table-column>
                        <el-table-column prop="ds2" label="3-2" width="90px"></el-table-column>
                        <el-table-column prop="ds3" label="3-3" width="90px"></el-table-column>
                        <el-table-column prop="ds4" label="3-4" width="90px"></el-table-column>
                    </el-table-column>
                </el-table>
            </el-card>
            <el-card id="quantitative-analysis" class="box-card">
                <div class="card-header">
                    <span>三、课程目标达成度定量分析</span>
                </div>
                <div>

                    <div class="statementBox">
                        该课程总成绩100分，由过程性考核和结果性考核两部分组成。过程性考核占总成绩比例40%，结果性考核占总评成绩的比例为60%，具体见下表考核成绩评定办法。</div>
                    <el-table  :data="quantitativeAnalysisData" border style="width: 100%" :span-method="spanMethod">
                        <el-table-column prop="courseObjective" label="课程目标" width="220"></el-table-column>
                        <el-table-column prop="supportLink" label="支撑环节" width="340"></el-table-column>
                        <el-table-column prop="weight" label="权重系数" width="400"></el-table-column>
                    </el-table>
                </div>
                <div class="statementBox">该课程2022级2班学生成绩具体计算详见2202班《数据结构》课程达成度分析成绩成绩表.xls附件文件，主要是学生成绩表。各教学环节达成度计算如下：
                </div>
                <div class="supportLink">
                    <span>支撑环节1--课堂表现</span>
                </div>
                <el-table :row-style="tableRowClassName" :data="classPerformanceData" style="width: 100%" border>
                    <el-table-column prop="courseObjective" label="课程目标" width="120px">
                    </el-table-column>
                    <el-table-column prop="supportLink" label="课堂表现">
                    </el-table-column>
                    <el-table-column prop="totalValue" label="总分值" width="120px">
                    </el-table-column>
                    <el-table-column prop="averageScore" label="学生平均分">
                    </el-table-column>
                    <el-table-column prop="completion" label="达成度" width="120px">
                    </el-table-column>
                </el-table>
                <div class="descBox">
                    说明：课堂表现占总成绩的10%，主要是课堂提问。
                </div>
                <div class="supportLink">
                    <span>支撑环节2--课程作业</span>
                </div>
                <el-table :row-style="tableRowClassName" :data="homeworkPerformanceData" border style="width: 100%">
                    <el-table-column prop="courseObjective" label="课程目标" width="120px">
                    </el-table-column>
                    <el-table-column prop="supportLink" label="课程作业">
                    </el-table-column>
                    <el-table-column prop="totalValue" label="总分值" width="120px">
                    </el-table-column>
                    <el-table-column prop="averageScore" label="学生平均分">
                    </el-table-column>
                    <el-table-column prop="completion" label="达成度" width="120px">
                    </el-table-column>
                </el-table>
                <div class="descBox">
                    说明：课程作业占总成绩的30%，包含4个作业。作业1和2为线性表作业，含顺序存储与链式存储，对应课程目标1；作业3为树作业，对应课程目标2；作业4为图作业，对应课程目标3。
                </div>
                <div class="supportLink">
                    <span>支撑环节3--期末考试</span>
                </div>
                <el-table :row-style="tableRowClassName" :data="examPerformanceData" border style="width: 100%">
                    <el-table-column prop="courseObjective" label="课程目标" width="120px">
                    </el-table-column>
                    <el-table-column prop="question" label="题号">
                    </el-table-column>
                    <el-table-column prop="totalValue" label="总分值" width="120px">
                    </el-table-column>
                    <el-table-column prop="averageScore" label="学生平均分">
                    </el-table-column>
                    <el-table-column prop="completion" label="达成度" width="120px">
                    </el-table-column>
                </el-table>
                <div class="descBox">
                    说明：期末考试共3大题，第一题对应课程目标1，第二题对应课程目标2，第三题对应课程目标3。
                </div>
                <div class="supportLink">
                    <span>四、课程目标达成度</span>
                </div>
                <el-table :row-style="tableRowClassName" :data="courseAchievementData" border style="width: 100%">
                    <el-table-column prop="courseObjective" label="课程目标" width="320px">
                    </el-table-column>
                    <el-table-column prop="supportLinks" label="支撑环节">
                    </el-table-column>
                    <el-table-column prop="completion" label="达成度" width="320px">
                    </el-table-column>
                </el-table>
                <div class="descBox">
                    说明：课程目标达成度=课堂表现达成度×0.1+课程作业达成度×0.3+期末考试达成度×0.6。
                </div>
            </el-card>
            <el-card id="summary-improvement" class="box-card">
                <div class="card-header">
                    <span>四、总结及改进措施</span>
                </div>
                <el-table :data="summaryImprovementData" border style="width: 100%">
                    <el-table-column prop="item" label="项目" width="180">
                    </el-table-column>
                    <el-table-column prop="description" label="描述">
                    </el-table-column>
                </el-table>

            </el-card>
            <el-card id="evaluation-confirmation" class="box-card">
                <div class="card-header">
                    <span>五、课程目标达成度评价合理性确认</span>
                </div>
                <el-table :data="evaluationConfirmationData" border style="width: 100%">
                    <el-table-column prop="role" label="评价责任人" width="100">
                    </el-table-column>
                    <el-table-column label="课程目标达成度评价合理性">
                        <el-table-column prop="fullApproval" label="合理" width="140px">
                        </el-table-column>
                        <el-table-column prop="partialApproval" label="基本合理" width="120px">
                        </el-table-column>
                        <el-table-column prop="noApproval" label="不合理" width="120px">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column :width="100" label="课程质量持续改进措施">
                        <el-table-column prop="fullDisapproval" label="可行" width="120px">
                        </el-table-column>
                        <el-table-column prop="partialDisapproval" label="基本可行" width="120px">
                        </el-table-column>
                        <el-table-column prop="noDisapproval" label="不可行" width="120px">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="签字（章）">
                        <el-table-column prop="fullDisapproval" width="120px">
                        </el-table-column>
                    </el-table-column>
                </el-table>
                <el-table :data="evaluationConfirmationData" border style="width: 100%">
                    <el-table-column prop="role" label="评价责任人" width="100">
                    </el-table-column>
                    <el-table-column label="课程目标达成度评价合理性">
                        <el-table-column prop="fullApproval" label="合理" width="140px">
                        </el-table-column>
                        <el-table-column prop="partialApproval" label="基本合理" width="120px">
                        </el-table-column>
                        <el-table-column prop="noApproval" label="不合理" width="120px">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column :width="100" label="课程质量持续改进措施">
                        <el-table-column prop="fullDisapproval" label="可行" width="120px">
                        </el-table-column>
                        <el-table-column prop="partialDisapproval" label="基本可行" width="120px">
                        </el-table-column>
                        <el-table-column prop="noDisapproval" label="不可行" width="120px">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="签字（章）">
                        <el-table-column prop="fullDisapproval" width="120px">
                        </el-table-column>
                    </el-table-column>
                </el-table>
                <el-table :data="evaluationConfirmationData" border style="width: 100%">
                    <el-table-column prop="role" label="评价责任人" width="100">
                    </el-table-column>
                    <el-table-column label="课程目标达成度评价合理性">
                        <el-table-column prop="fullApproval" label="合理" width="140px">
                        </el-table-column>
                        <el-table-column prop="partialApproval" label="基本合理" width="120px">
                        </el-table-column>
                        <el-table-column prop="noApproval" label="不合理" width="120px">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column :width="100" label="课程质量持续改进措施">
                        <el-table-column prop="fullDisapproval" label="可行" width="120px">
                        </el-table-column>
                        <el-table-column prop="partialDisapproval" label="基本可行" width="120px">
                        </el-table-column>
                        <el-table-column prop="noDisapproval" label="不可行" width="120px">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="签字（章）">
                        <el-table-column prop="fullDisapproval" width="120px">
                        </el-table-column>
                    </el-table-column>
                </el-table>
                <el-table :data="evaluationConfirmationData" border style="width: 100%">
                    <el-table-column prop="role" label="评价责任人" width="100">
                    </el-table-column>
                    <el-table-column label="课程目标达成度评价合理性">
                        <el-table-column prop="fullApproval" label="合理" width="140px">
                        </el-table-column>
                        <el-table-column prop="partialApproval" label="基本合理" width="120px">
                        </el-table-column>
                        <el-table-column prop="noApproval" label="不合理" width="120px">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column :width="100" label="课程质量持续改进措施">
                        <el-table-column prop="fullDisapproval" label="可行" width="120px">
                        </el-table-column>
                        <el-table-column prop="partialDisapproval" label="基本可行" width="120px">
                        </el-table-column>
                        <el-table-column prop="noDisapproval" label="不可行" width="120px">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="签字（章）">
                        <el-table-column prop="fullDisapproval" width="120px">
                        </el-table-column>
                    </el-table-column>
                </el-table>
            </el-card>
        </div>
    </div>

</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import JsPDF from 'jspdf';
import { evaluationMatrix, evaluationConfirmationData, summaryImprovementData, courseAchievementData, examPerformanceData, classPerformanceData, homeworkPerformanceData, courseBasicInfo, quantitativeAnalysisData, spanMethod } from './dataSET'
import html2canvas from 'html2canvas';
// 激活的菜单项，默认为第一个
const activeMenu = ref('basic-info');
const tableRowClassName = ({row,rowIndex}) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#fdf6ec' };
    } else {
        return { backgroundColor: '#f0f9eb' };
    }
}
const exportToPDF = async () => {
    const content = document.querySelector('.content-to-export');
    const canvas = await html2canvas(content);
    const imgData = canvas.toDataURL('image/png');

    const pdf = new JsPDF({
        orientation: 'portrait',
        unit: 'px',
        format: [canvas.width, canvas.height]
    });

    pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);
    pdf.save('exported-document.pdf');
};



// 处理菜单项选择事件
const handleMenuSelect = (index) => {
    // 更新激活的菜单项
    activeMenu.value = index;
    // 滚动到相应的内容区域
    scrollToSection(index);
};

// 滚动到指定的内容区域
const scrollToSection = (sectionId) => {
    const section = document.getElementById(sectionId);
    const container = document.querySelector('.content-to-export');
    if (section && container) {
        // 计算目标元素的顶部相对于容器顶部的位置
        let sectionTop = section.offsetTop;

        // 循环遍历，累加所有父元素的offsetTop值，直到达到container
        let parent = section.offsetParent;
        while (parent !== container && parent !== null) {
            sectionTop += parent.offsetTop;
            parent = parent.offsetParent;
        }

        // 使用容器的 scrollTo 方法实现平滑滚动
        container.scrollTo({
            top: sectionTop - container.offsetTop,
            behavior: 'smooth'
        });
    }
};



const updateSidebarHighlight = () => {
    const container = document.querySelector('.content-to-export');
    const sections = document.querySelectorAll('.content-to-export > .box-card');
    let currentActive = null;
    let minDistance = Infinity;
    sections.forEach(section => {
        const rect = section.getBoundingClientRect();
        const containerRect = container.getBoundingClientRect();
        const topDistance = Math.abs(rect.top - containerRect.top);

        // 查找与容器顶部距离最近的章节
        if (topDistance < minDistance) {
            minDistance = topDistance;
            currentActive = section.id;
        }
    });
    if (currentActive) {
        activeMenu.value = currentActive;
    }
};


// 组件挂载后添加滚动监听器
onMounted(() => {
    const container = document.querySelector('.content-to-export');
    container.addEventListener('scroll', updateSidebarHighlight);
});
</script>
<style scoped lang="scss">
$active-gradient: linear-gradient(to right, #60a5fa, #d9e8fc); // 激活状态的渐变色
$inactive-gradient: linear-gradient(to right, #f4ece8, #898485); // 非激活状态的渐变色
$underline-height: 2px; // 下划线的高度
$underline-offset: 10px; // 下划线与文字的间距
// 定义一个mixin用于渐变背景
@mixin gradient-bg($startColor, $endColor) {
    background: $startColor; // 老的浏览器兼容
    background: linear-gradient(to right, $startColor, $endColor);
}
$inactive-gradient-start: #60a5fa; // 非激活状态的开始颜色
$inactive-gradient-end: #378CE7; // 非激活状态的结束颜色
$active-gradient-start: #005eff; // 激活状态的开始颜色
$active-gradient-end: #0a5ff2; // 激活状态的结束颜色
.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.outerBox {
    display: flex;
    border: 1px solid rgb(208, 199, 201);
    border-radius: 10px;
    box-shadow: 1px -8px 11px 1px rgba(0, 0, 0, 0.1);
    background-color: #f4f4fc;
   
    // .el-table {
    //         .el-table__row {
    //             &:nth-child(odd) {
    //                 background-color: #e91515 !important; // 使用!important来提高优先级
    //             }
    
    //             &:nth-child(even) {
    //                 background-color: #21adf3 !important; // 使用!important来提高优先级
    //             }
    //         }
    //     }
    .sidebar {
            /* 隐藏横向滚动条 */
            background: linear-gradient(to bottom right, #DFF5FF, rgb(201 104 30 / 0%));
            backdrop-filter: blur(5px);
        .sidebar-menu {
                    box-sizing: border-box;
                    padding: 60px;
                    width: 304px;
                    margin: 30px 0 0 -11px;
                    border-radius: 10px;
                    // overflow-x: hidden;
                    background-color: transparent;
                // 应用渐变背景
                // @include gradient-bg(#f4ece8, #898485);
            // border: 5px solid rgb(208, 199, 201);
                .el-menu-item {
                    color: #496773;
                    font-size: 12px;
                    position: relative; // 为伪元素定位做准备
                    margin-bottom: $underline-offset; // 为下划线留出空间
                    &:not(.is-active)::after {
                        content: '';
                            position: absolute;
                            bottom: -$underline-height;
                            left: 0;
                            right: 0;
                            height: $underline-height;
                            background: linear-gradient(to right, $inactive-gradient-end, transparent); // 从粗到细的渐变效果
                            border-radius: 1px;
                    }
        
                    &.is-active::after {
                        content: '';
                            position: absolute;
                            bottom: -$underline-height;
                            left: 0;
                            right: 0;
                            height: $underline-height + 1px;
                            background: linear-gradient(to right, $active-gradient-end, transparent); // 激活状态也应用渐变
                            border-radius: 1px;
                    }
                    &:hover {
                        background-color: #d9e8fc9c; // 鼠标悬停时的背景色
                        &::after {
                            background: linear-gradient(to right, $active-gradient-end, transparent); // 保持渐变效果
                        }
                    }
                }
            }
    }

    .content-to-export {
        // border: 3px solid pink;
        overflow-y: auto;
        
        /* 允许垂直方向上的滚动 */
        height: 100vh;
        /* 或者根据您的布局需求设定固定高度 */
        flex: 1;
        margin-left: 40px;
        &::-webkit-scrollbar {
                width: 10px;
        }
        &::-webkit-scrollbar-thumb {
            background-color: #60a5fa87;
            /* 设置滚动条滑块颜色 */
            border-radius: 10px;
            /* 设置滚动条滑块圆角 */
        }
        // background-color: #e4a2a2;
        // margin-left: 150px;
        .headerTest{
            width: 1022px;
            background-color: #d9e8fc;
            color: #64748b;
            text-align: center;
            height: 50px;
            line-height: 50px;
            font-size: 24px;
            font-family: Arial, sans-serif;
            border-radius: 5px;
            border-left: 5px solid #60a5fa;
            border-top: none;
            border-right: none;
            border-bottom: none;
            margin-bottom: 10px;
        }
        .box-card {
            margin-bottom: 8px;
            padding: 10px;
            .card-header {
                border-bottom: 2px dashed #ccc;
                margin-bottom: 14px;
                padding-bottom: 10px;
                span{
                    font-weight: bold;
                    font-size: 16px;
                }
            }
            .statementBox{
                // color: rgb(235, 200, 200);
                letter-spacing: 2px;
                padding: 10px;
            }
            .descBox{
                color: #ccc;
                font-size: 12px;
                padding: 10px 0px;
            }
            .supportLink{
                padding: 10px;
                font-size: 14px;
            }
        }
    }
}

.diagonal-split-header {
    position: relative;
    height: 60px;
}

.text-part {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.diagonal-line {
    position: absolute;
    width: 200%;
    top: -48px;
    left: 9px;
    height: 100px;
    background: transparent;
    transform: rotate(-152deg);
    border-top: 1px solid #807878;
}
</style>
